<template>
  <div class="blog-body">
    <div class="blog-title">{{ blogInfo.blogTitle }}</div>
    <div class="blog-meta">
      <div class="time">发布时间：{{ blogInfo.createdTime }}</div>
      <div class="meta-container">
        <span
          class="meta-item"
        ><i class="el-icon-view" />阅读:{{ meta.blogRead }}
        </span>
        <span
          class="meta-item"
        ><i class="el-icon-star-off" />收藏:{{ meta.blogCollection }}
        </span>
        <span
          class="meta-item"
        ><i class="el-icon-lollipop" />点赞:{{ meta.blogGoods }}
        </span>
        <span
          class="meta-item"
        ><i class="el-icon-chat-round" />评论:{{ meta.blogComment }}</span>
      </div>
    </div>
    <div class="content" v-html="blogInfo.blogContent" />
    <div class="handler">
      <div v-if="goodsFlag" class="handle-item active" @click="cancelGoods">
        <i class="el-icon-lollipop" /> 点赞
      </div>
      <div v-else class="handle-item" @click="goods">
        <i class="el-icon-lollipop" /> 点赞
      </div>
      <div
        v-if="collectionFlag"
        class="handle-item active"
        @click="cancelCollection"
      >
        <i class="el-icon-star-off" /> 收藏
      </div>
      <div v-else class="handle-item" @click="collection">
        <i class="el-icon-star-off" /> 收藏
      </div>
    </div>
  </div>
</template>

<script>
import { get,getMeta } from '@/api/blog'
import { goods, getGoods, cancelGoods } from '@/api/blog-goods'
import { collection, getCollection, cancelCollection } from '@/api/blog-collection'

export default {
  props: {
    blogId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      // 博客对象
      blogInfo: {},
      // 标识博客是否被点赞
      goodsFlag: false,
      // 标识该博客是否被收藏
      collectionFlag: false,
      // meta对象
      meta: {}
    }
  },
  watch: {
    blogId: {
      immediate: true,
      handler: function() {
        this.getInfo()
        this.getGoods()
        this.getCollection()
        this.getMeta()
      }
    }
  },
  methods: {
    // 根据 id 获取全部详情
    getInfo() {
      get(this.blogId).then((res) => {
        this.blogInfo = res.data
      })
    },
    // 获取点赞数阅读数评论数收藏数 详细信息
    getMeta() {
      getMeta(this.blogId).then(res =>{
          this.meta = res.data
      })
    },
    // 点赞
    goods() {
      goods(this.blogId).then(res => {
        this.goodsFlag = true
        this.getMeta()
      })
    },
    // 查询点赞
    getGoods() {
      getGoods(this.blogId).then(res => {
        const count = res.data
        this.goodsFlag = count > 0
      })
    },
    // 取消点赞
    cancelGoods() {
      cancelGoods(this.blogId).then(res => {
        this.goodsFlag = false
        this.getMeta()
      })
    },
    // 收藏
    collection() {
      collection(this.blogId).then(res => {
        this.collectionFlag = true
        this.getMeta()
        
      })
    },
    // 查询收藏
    getCollection() {
      getCollection(this.blogId).then(res => {
        const count = res.data
        this.collectionFlag = count > 0
      })
    },
    // 取消收藏
    cancelCollection() {
      cancelCollection(this.blogId).then(res => {
        this.collectionFlag = false
        this.getMeta()
      })
    }
  }
}
</script>

<style src="./blog-info.css" scoped>
</style>
